<html xmlns:th="http://www.thymeleaf.org">
<head>
<style>
.personal-navbar {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: #dedede !important;
	justify-content: center;
}

.personal-navbar li {
	padding-bottom: 0;
	padding-top: 0;
	min-width: 150px;
	text-align: center;
}

.personal-navbar a {
	color: #282828;
	font-size: 15px;
}

.selected-personal-nav-item, .personal-navbar li:hover {
	background-color: #ec494c;
	border-radius: 30px;
}

.selected-personal-nav-item>a, .personal-navbar li:hover>a {
	color: white !important;
}
</style>
</head>
<body>
	<div id="personal-navbar" v-cloak>
		<div class="row">
			<div class="col-sm-12">
				<nav class="navbar navbar-expand-sm bg-light personal-navbar">
					<ul class="navbar-nav">
						<li class="nav-item" v-bind:class="{'selected-personal-nav-item': currentPathName == '/personal-center'}" v-on:click="navTo('/personal-center')"><a class="nav-link">个人中心</a></li>
						<li class="nav-item" v-bind:class="{'selected-personal-nav-item': currentPathName == '/recharge'}" v-on:click="navTo('/recharge')"><a class="nav-link">线上充值</a></li>
						<li class="nav-item" v-bind:class="{'selected-personal-nav-item': currentPathName == '/withdraw'}" v-on:click="navTo('/withdraw')"><a class="nav-link">线上提现</a></li>
						<li class="nav-item" v-bind:class="{'selected-personal-nav-item': currentPathName == '/betting-record'}" v-on:click="navTo('/betting-record')"><a class=" nav-link">投注记录</a></li>
						<li class="nav-item" v-bind:class="{'selected-personal-nav-item': currentPathName == '/tracking-number-record'}" v-on:click="navTo('/tracking-number-record')"><a class="nav-link">追号记录</a></li>
						<li class="nav-item" v-show="headerVM.accountType == 'admin' || headerVM.accountType == 'agent'" v-bind:class="{'selected-personal-nav-item': currentPathName == '/agent-center'}" v-on:click="navTo('/agent-center')"><a class="nav-link">代理中心</a></li>
						<li class="nav-item"><a class="nav-link">站内信</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var personalNavbar = new Vue({
			el : '#personal-navbar',
			data : {
				currentPathName : ''
			},
			computed : {},
			created : function() {
				this.currentPathName = window.location.pathname;
			},
			methods : {
				navTo : function(pathname) {
					window.location.href = pathname;
				}
			}
		});
	</script>
</body>
</html>
